<template>
  <div>
    <div style="width: 100%; position: fixed; z-index: 2;top: 0;background:#fff;">
      <div class="search" @click="search">
        <van-icon name="search" />
        <span>搜索商品, 共34145款好物</span>
      </div>
    </div>
    <banners></banners>
    <div style="width: 100%; height: 205px;">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in categoryList"><img :src="item.bannerUrl"
            style="width: 100%; height: 205px;" /></van-swipe-item>
      </van-swipe>
    </div>
    <sortdetail v-for="item, index in categoryItemList" :item="item.category" :categoryItems="categoryItemList[index]">
    </sortdetail>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import { AnyObject } from '../../../../api/sort'
import { Allcategorydetail } from '../../../../api/sort'
import sortdetail from '../../../../components/sortdetrail/index.vue'
import banners from '../../../../views/banners/index.vue'
import { onUpdated } from 'vue';
import { useRouter } from 'vue-router';
const Router = useRouter()
const Route = useRoute()
onMounted(() => {
  let id = Route.query.id
  categoryL2ListIdHandler(id as string)
})
onUpdated(() => {
  let id = Route.query.id
  categoryL2ListIdHandler(id as string)
})
const categoryItemList = ref<AnyObject[]>([])
const categoryList = ref<AnyObject[]>([])
async function categoryL2ListIdHandler(id: string) {
  try {
    let res = await Allcategorydetail(id)
    categoryItemList.value = res.data.categoryItemList!
    categoryList.value = res.data.categoryList!
  } catch (error) {
    console.log(error)
  }
}
function search() {
  Router.replace('/search')
}
</script>

<style lang="less" scoped>
.search {
  display: flex;
  justify-content: center;
  height: .74667rem;
  font-size: .37333rem;
  color: #333;
  line-height: .74667rem;
  background-color: #ededed;
  border-radius: .10667rem;
  margin: .2rem .4rem;
}

.search .van-icon {
  font-size: .53rem;
  color: #333;
}
</style>